<template>
  <div class="case-main">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" :inline="true"
             v-if="!showMinderEditor">
      <el-container>
        <el-aside width="350px" style="padding: 0">
          <div class="left field-content">
            <div class="case-type">
              <p class="tip">生成模板</p>
              <el-form-item label="模板类型">
                <el-select v-model="operateId" placeholder="请选择用例类型">
                  <el-option label="新建表单" value="1"></el-option>
                  <el-option label="编辑表单" value="2"></el-option>
                  <el-option label="删除操作" value="3"></el-option>
                  <el-option label="启停操作" value="7"></el-option>
                  <el-option label="列表检索" value="4"></el-option>
                  <el-option label="列表排序" value="5"></el-option>
                  <el-option label="列表分页" value="6"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="info">
              <p class="tip">基本信息</p>
              <el-form-item label="功能名称" prop="info.name">
                <el-input v-model="ruleForm.info.name" placeholder="请输入功能名称"></el-input>
              </el-form-item>
              <el-form-item label="提交按钮" prop="info.btnName"
                            v-if="operateId === '' || operateId === '1' || operateId === '2' || operateId === '3'">
                <el-input v-model="ruleForm.info.btnName" placeholder="请输入提交按钮名称" style="width:184px">
                  <span slot="suffix">按钮</span>
                </el-input>
              </el-form-item>
              <el-form-item label="用例等级" prop="info.level">
                <el-select v-model="ruleForm.info.level" placeholder="请选择用例等级">
                  <el-option label="P0" value="1"></el-option>
                  <el-option label="P1" value="2"></el-option>
                  <el-option label="P2" value="3"></el-option>
                  <!--                  <el-option label="P3" value="4">4</el-option>-->
                </el-select>
              </el-form-item>
            </div>
            <div class="precondition">
              <p class="tip">前置条件</p>
              <el-form-item prop="precondition.name" label="操作用户">
                <el-input v-model="ruleForm.precondition.name" placeholder="操作此功能对应的用户"></el-input>
              </el-form-item>
              <el-form-item label="所属模块" prop="precondition.module">
                <el-input v-model="ruleForm.precondition.module" placeholder="操作此功能所在的模块页面"></el-input>
              </el-form-item>
              <el-form-item>
                <span slot="label">
                     <span class="span-box">
                       <span>其他条件</span>
                        <el-tooltip
                          style="diaplay:inline" effect="dark"
                          placement="top">
                          <div slot="content">1.${操作用户}已登录系统
                            <br/>2.已进入到${所属模块}页面
                            <br/>3.${其他条件}</div>
                          <i class="el-icon-info"/>
                        </el-tooltip>
                     </span>
                   </span>
                <el-input v-model="ruleForm.precondition.otherConditions" type="textarea" placeholder="请输入其他条件"
                          :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>
            </div>
            <div class="msCorrelation">
              <p class="tip">MeterSphere相关</p>
              <el-form-item label="责任人(ID)">
                <el-input v-model="ruleForm.msCorrelation.id" placeholder="请输入责任人(ID)"></el-input>
              </el-form-item>
              <el-form-item label="版本号">
                <el-input v-model="ruleForm.msCorrelation.version" placeholder="请输入版本号"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-aside>
        <el-main style="padding: 0">
          <div class="right" style="border-left: 1px solid #dcdfe6">
            <div class="field-content" v-if="operateId === '1' || operateId === '2' || operateId === ''">
              <div v-for="(item,index) in ruleForm.newEditForm" :key="index" class="">
                <p class="tip">
                  <span v-if="!item.name">字段{{ index + 1 }}</span>
                  <span v-else>字段{{ index + 1 }} - {{ item.name }}</span>
                  <span class="el-icon-delete field-delete" @click="deleteField(index)"> 删除</span>
                </p>
                <div>
                  <el-form-item label="控件类型"
                                :prop="`newEditForm.${index}.type`"

                                :rules="{required: true, message: '请选择控件类型', trigger: 'blur'}">
                    <el-select v-model="item.type" placeholder="请选择控件类型">
                      <el-option label="输入框" value="input"></el-option>
                      <el-option label="单选框" value="radio"></el-option>
                      <el-option label="多选框" value="checkbox"></el-option>
                      <el-option label="计数器" value="inputNumber"></el-option>
                      <el-option label="下拉框" value="select"></el-option>
                      <el-option label="级联选择器" value="cascader"></el-option>
                      <el-option label="日期选择器" value="datePicker"></el-option>
                      <el-option label="时间选择器" value="timePicker"></el-option>
                      <el-option label="上传" value="upload"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="字段名称"
                                :prop="`newEditForm.${index}.name`"
                                :rules="{required: true, message: '请输入字段名称', trigger: 'blur'}">
                    <el-input v-model="item.name" placeholder="请输入字段名称"></el-input>
                  </el-form-item>
                  <el-form-item label="是否必填"
                                :prop="`newEditForm.${index}.require`"
                                :rules="{required: true, message: '是否必填不能为空', trigger: 'blur'}">
                    <el-switch v-model="item.require"></el-switch>
                  </el-form-item>
                  <el-form-item label="是否限制" v-if="item.type === 'datePicker' || item.type === 'timePicker'"
                                :prop="`newEditForm.${index}.restriction`"
                                :rules="{required: true, message: '是否限制日期/时间不能为空', trigger: 'blur'}">
                    <el-switch v-model="item.restriction"></el-switch>
                  </el-form-item>
                  <el-form-item
                    v-if="item.type !== 'upload' && item.type !== 'datePicker' && item.type !== 'timePicker'"
                    :prop="`newEditForm.${index}.value`"
                    :rules="{required: true, message: '请输入输入值或选项值', trigger: 'blur'}">
                  <span slot="label">
                     <span class="span-box">
                       <span>输入值</span>
                        <el-tooltip
                          v-if="item.type === 'select' || item.type === 'checkbox' || item.type === 'cascader'"
                          style="diaplay:inline" effect="dark" content="多选值时请用英文逗号隔开" placement="top">
                          <i class="el-icon-info
"/>
                        </el-tooltip>
                     </span>
                   </span>
                    <el-input v-model="item.value" placeholder="请输入输入值或选项值"></el-input>
                  </el-form-item>
                </div>
                <div v-if="item.type === 'inputNumber'">
                  <el-form-item label="数值大小"
                                :prop="`newEditForm.${index}.minValue`"
                                :rules="{required: true, message: '请输入字段最小数值', trigger: 'blur'}">
                    <el-input-number v-model="item.minValue" label="最小值"></el-input-number>
                  </el-form-item>
                  <span style="margin-top: 8px;display: inline-block;">&nbsp;~&nbsp</span>
                  <el-form-item label=""
                                :prop="`newEditForm.${index}.maxValue`"
                                label-width="0"
                                :rules="{required: true, message: '请输入字段最大数值', trigger: 'blur'}">
                    <el-input-number v-model="item.maxValue" label="最大值"></el-input-number>
                  </el-form-item>
                </div>
                <div v-if="item.type === 'input'">
                  <el-form-item label="字段长度"
                                :prop="`newEditForm.${index}.minLength`"
                                :rules="{required: true, message: '请输入字段最小长度', trigger: 'blur'}">
                    <el-input-number v-model="item.minLength" label="最小值"></el-input-number>
                  </el-form-item>
                  <span style="margin-top: 8px;display: inline-block;">&nbsp;~&nbsp</span>
                  <el-form-item label=""
                                label-width="0"
                                :prop="`newEditForm.${index}.maxLength`"
                                :rules="{required: true, message: '请输入字段最大长度', trigger: 'blur'}">
                    <el-input-number v-model="item.maxLength" label="最大值"></el-input-number>
                  </el-form-item>
                  <el-form-item label="是否唯一"
                                :prop="`newEditForm.${index}.repeat`"
                                :rules="{required: true, message: '是否唯一不能为空', trigger: 'blur'}">
                    <el-switch v-model="item.repeat"></el-switch>
                  </el-form-item>
                </div>
                <div v-if="item.restriction">
                  <el-form-item label="日期选择"
                                v-if="item.type === 'datePicker'"
                                :prop="`newEditForm.${index}.chooseDate`"
                                :rules="{required: true, message: '日期选择方式不能为空', trigger: 'change'}">
                    <el-radio-group v-model="item.chooseDate">
                      <el-radio label="1">单个日期</el-radio>
                      <el-radio label="2">日期范围</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="时间选择"
                                v-if="item.type === 'timePicker'"
                                :prop="`newEditForm.${index}.chooseTime`"
                                :rules="{required: true, message: '时间选择方式不能为空', trigger: 'change'}">
                    <el-radio-group v-model="item.chooseTime">
                      <el-radio label="1">单个时间</el-radio>
                      <el-radio label="2">时间范围</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="比较符"
                                v-if="(item.type === 'datePicker' || item.type === 'timePicker') && (item.chooseDate === '1' || item.chooseTime === '1')"
                                :prop="`newEditForm.${index}.comparator`"
                                :rules="{required: true, message: '请选择比较符', trigger: 'blur'}">
                    <el-select v-model="item.comparator" placeholder="请选择控件类型">
                      <el-option label="大于" value=">"></el-option>
                      <el-option label="等于" value="="></el-option>
                      <el-option label="小于" value="<"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="日期范围"
                                :prop="`newEditForm.${index}.datePicker`"
                                :rules="{required: true, message: '请输入日期范围', trigger: 'blur'}"
                                v-if="item.type === 'datePicker' && item.chooseDate === '2'">
                    <el-date-picker
                      v-model="item.datePicker"
                      type="daterange"
                      range-separator="至"
                      value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                      start-placeholder="开始日期"
                      style="width: 100%"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="时间范围"
                                :prop="`newEditForm.${index}.timePicker`"
                                :rules="{required: true, message: '请输入时间范围', trigger: 'blur'}"
                                v-if="item.type === 'timePicker' && item.chooseTime === '2'">
                    <el-date-picker
                      v-model="item.timePicker"
                      type="datetimerange"
                      range-separator="至"
                      value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="单个日期"
                                :prop="`newEditForm.${index}.singleDate`"
                                :rules="{required: true, message: '请输入单个日期', trigger: 'blur'}"
                                v-if="item.type === 'datePicker' && item.chooseDate === '1'">
                    <el-date-picker
                      v-model="item.singleDate"
                      type="date"
                      value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="单个时间"
                                :prop="`newEditForm.${index}.singleTime`"
                                :rules="{required: true, message: '请输入单个时间', trigger: 'blur'}"
                                v-if="item.type === 'timePicker' && item.chooseTime === '1'">
                    <el-date-picker
                      v-model="item.singleTime"
                      value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div v-if="item.type === 'upload'">
                  <el-form-item label="文件大小"
                                :prop="`newEditForm.${index}.fileSize`"
                                :rules="{required: true, message: '请输入文件大小', trigger: 'blur'}">
                    <el-input v-model="item.fileSize" placeholder="请输入文件大小">
                      <span slot="suffix">MB</span>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="文件格式"
                                :prop="`newEditForm.${index}.fileFormat`"
                                :rules="{required: true, message: '请选择允许上传的文件格式', trigger: 'blur'}">
                    <el-select v-model="item.fileFormat" multiple placeholder="请选择允许上传的文件格式">
                      <el-option-group
                        v-for="group in fileFormatOptions"
                        :key="group.label"
                        :label="group.label">
                        <el-option
                          v-for="item in group.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="最大上传数"
                                :prop="`newEditForm.${index}.maxNum`"
                                :rules="{required: true, message: '请输入文件上传最大数量', trigger: 'blur'}">
                    <el-input-number v-model="item.maxNum" label="最大值" :min="1" step-strictly></el-input-number>
                  </el-form-item>
                </div>
                <el-divider></el-divider>
              </div>
            </div>
            <div class="delete-operation" v-if="operateId==='3'">
              <p class="tip">删除操作</p>
              <el-form-item label="删除方式" prop="deleteOperation.type" label-width="150px">
                <el-radio-group v-model="ruleForm.deleteOperation.type">
                  <el-radio label="1">单个删除</el-radio>
                  <el-radio label="2">批量删除</el-radio>
                </el-radio-group>
              </el-form-item>
              <br>
              <el-form-item label="是否有引用关系" prop="deleteOperation.isContact" label-width="150px">
                <el-switch v-model="ruleForm.deleteOperation.isContact"></el-switch>
              </el-form-item>
              <br>
              <el-form-item label="删除提示语" prop="deleteOperation.prompt" label-width="150px"
                            v-if="ruleForm.deleteOperation.isContact === false">
                <el-input v-model="ruleForm.deleteOperation.prompt" type="textarea" style="width: 200%"
                          placeholder="请输入删除提示语"
                          :autosize="{ minRows: 4, maxRows: 6}"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="引用删除提示语" prop="deleteOperation.contactPrompt" label-width="150px"
                            v-if="ruleForm.deleteOperation.isContact === true">
                <el-input v-model="ruleForm.deleteOperation.contactPrompt" type="textarea" style="width: 200%"
                          placeholder="请输入引用删除提示语"
                          :autosize="{ minRows: 4, maxRows: 6}"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="有引用能够删除" prop="deleteOperation.isCanStill" label-width="150px"
                            v-if="ruleForm.deleteOperation.isContact === true">
                <el-switch v-model="ruleForm.deleteOperation.isCanStill"></el-switch>
              </el-form-item>
            </div>
            <div class="list-search field-content" v-if="operateId === '4'">
              <p class="tip">检索字段</p>
              <el-form-item label="字段个数" prop="searchFieldSize">
                <el-input-number @change="changeNumber" :max="20" :min="1" step-strictly
                                 v-model="ruleForm.searchFieldSize"></el-input-number>
              </el-form-item>
              <div v-for="(item,index) in ruleForm.listSearch" :key="index">
                <p class="tip">
                  <span v-if="!item.name">字段{{ index + 1 }}</span>
                  <span v-else>字段{{ index + 1 }} - {{ item.name }}</span>
                </p>
                <el-form-item label="控件类型"
                              :prop="`listSearch.${index}.type`"
                              :rules="{required: true, message: '请选择控件类型', trigger: 'blur'}">
                  <el-select v-model="item.type" placeholder="请选择控件类型">
                    <el-option label="输入框" value="input"></el-option>
                    <el-option label="单选框" value="radio"></el-option>
                    <el-option label="多选框" value="checkbox"></el-option>
                    <el-option label="下拉框" value="select"></el-option>
                    <el-option label="级联选择器" value="cascader"></el-option>
                    <el-option label="日期选择器" value="datePicker"></el-option>
                    <el-option label="时间选择器" value="timePicker"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="检索字段"
                              :prop="`listSearch.${index}.name`"
                              :rules="{required: true, message: '请输入字段名称', trigger: 'blur'}">
                  <span slot="label">
                     <span class="span-box">
                       <span>检索字段</span>
                        <el-tooltip
                          v-if="item.type === 'input'"
                          style="diaplay:inline" effect="dark" content="一个输入框匹配多个值时请用英文逗号隔开" placement="top">
                          <i class="el-icon-info
"/>
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input v-model="item.name" placeholder="请输入字段名称"></el-input>
                </el-form-item>
                <el-form-item label="匹配方式"
                              v-if="item.type === 'input'"
                              :prop="`listSearch.${index}.rule`"
                              :rules="{required: true, message: '匹配方式不能为空', trigger: 'change'}">
                  <el-radio-group v-model="item.rule">
                    <el-radio label="1">精确</el-radio>
                    <el-radio label="2">模糊</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  :prop="`listSearch.${index}.value`"
                  v-if="item.type !== 'datePicker' && item.type !== 'timePicker'"
                  :rules="{required: true, message: '请输入检索结果存在的搜索值', trigger: 'blur'}">
                  <span slot="label">
                     <span class="span-box">
                       <span>检索存在值</span>
                        <el-tooltip
                          v-if="item.type === 'select' || item.type === 'checkbox' || item.type === 'cascader'"
                          style="diaplay:inline" effect="dark" content="多选值时请用英文逗号隔开" placement="top">
                          <i class="el-icon-info
"/>
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input v-model="item.value" placeholder="检索输入值或选项值"></el-input>
                </el-form-item>
                <el-form-item
                  label-width="130px"
                  :prop="`listSearch.${index}.noValue`"
                  v-if="item.type !== 'datePicker' && item.type !== 'timePicker'"
                  :rules="{required: true, message: '请输入检索结果不存在的搜索值', trigger: 'blur'}">
                  <span slot="label">
                     <span class="span-box">
                       <span>检索不存在值</span>
                        <el-tooltip
                          v-if="item.type === 'select' || item.type === 'checkbox' || item.type === 'cascader'"
                          style="diaplay:inline" effect="dark" content="多选值时请用英文逗号隔开" placement="top">
                          <i class="el-icon-info
"/>
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input v-model="item.noValue" placeholder="检索输入值或选项值"></el-input>
                </el-form-item>
                <el-form-item label="日期范围"
                              :prop="`listSearch.${index}.datePicker`"
                              :rules="{required: true, message: '请输入日期范围', trigger: 'blur'}"
                              v-if="item.type === 'datePicker'">
                  <el-date-picker
                    v-model="item.datePicker"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="时间范围"
                              :prop="`listSearch.${index}.timePicker`"
                              :rules="{required: true, message: '请输入时间范围', trigger: 'blur'}"
                              v-if="item.type === 'timePicker'">
                  <el-date-picker
                    v-model="item.timePicker"
                    type="datetimerange"
                    range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="list-search field-content list-sort" v-if="operateId === '5'">
              <p class="tip">排序字段</p>
              <el-form-item label="字段个数" prop="sortFieldSize">
                <el-input-number @change="changeNumber" :max="20" :min="1"
                                 v-model="ruleForm.sortFieldSize"></el-input-number>
              </el-form-item>
              <div v-for="(item,index) in ruleForm.listSort">
                <el-form-item :label="`字段${index}`"
                              :prop="`listSort.${index}.name`"
                              :rules="{required: true, message: '请输入字段名称', trigger: 'blur'}">
                  <el-input v-model="item.name" placeholder="请输入字段名称"></el-input>
                </el-form-item>
              </div>

            </div>
            <div class="start-stop-operation" v-if="operateId==='7'">
              <p class="tip">启停操作</p>
              <el-form-item label="启用有无二次确认" prop="startStopOperation.isStartConfirm" label-width="150px">
                <el-switch v-model="ruleForm.startStopOperation.isStartConfirm"></el-switch>
              </el-form-item>
              <br>
              <el-form-item label="启用提示语" prop="startStopOperation.startupPrompt" label-width="150px"
                            v-if="ruleForm.startStopOperation.isStartConfirm">
                <el-input v-model="ruleForm.startStopOperation.startupPrompt" type="textarea" style="width: 200%"
                          placeholder="请输入启用提示语"
                          :autosize="{ minRows: 4, maxRows: 6}"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="停用有无二次确认" prop="startStopOperation.isStopConfirm" label-width="150px">
                <el-switch v-model="ruleForm.startStopOperation.isStopConfirm"></el-switch>
              </el-form-item>
              <br>
              <el-form-item label="停用提示语" prop="startStopOperation.stopPrompt" label-width="150px"
                            v-if="ruleForm.startStopOperation.isStopConfirm">
                <el-input v-model="ruleForm.startStopOperation.stopPrompt" type="textarea" style="width: 200%"
                          placeholder="请输入停用提示语"
                          :autosize="{ minRows: 4, maxRows: 6}"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-form>
    <div v-if="!showMinderEditor">
      <div v-if="btnShow" class="bottom_btn">
        <div class="fab-item-title thirdBtn" v-if="operateId === '1' || operateId === '2' || operateId === ''">
          <span @click="addField">新增字段</span></div>
        <div class="fab-item-title firstBtn"><span @click="generateMinder('ruleForm')">生成用例</span></div>
        <div class="fab-item-title fifthBtn"><span @click="listVisible = true">引用配置</span></div>
        <div class="fab-item-title fourthBtn" @click="save">
          <span v-if="caseConfigId===''">新建配置</span>
          <span v-else>编辑配置</span>
        </div>
        <div class="fab-item-title secondBtn"><span @click="resetForm('ruleForm')">重 置</span></div>
      </div>
      <div class="optBtn">
        <el-button icon="el-icon-thumb" circle @click="btnShow = !btnShow" class="hand-btn"></el-button>
      </div>
    </div>
    <MinderEditor :data="initJson" :id="ruleForm.msCorrelation.id" :version="ruleForm.msCorrelation.version"
                  :moduleName="ruleForm.precondition.module" v-if="showMinderEditor"
                  @close="showMinderEditor=false"></MinderEditor>
    <cu-dialog :dialogVisble="cuVisible" :content="ruleForm" @closeDialog="cuVisible = false"
               :operateId="operateId"></cu-dialog>
    <list-dialog :dialogVisble="listVisible" @closeDialog="listVisible = false" :operateId="operateId"
                 @updateForm="userCaseConfig"></list-dialog>
  </div>

</template>

<script>
import MinderEditor from "@/components/MinderEditor/index";
import CuDialog from "./cuDialog";
import ListDialog from "./listDialog";

export default {
  components: {MinderEditor, CuDialog, ListDialog},
  name: 'otherSide',
  data() {
    return {
      operateId: "1",
      fileFormatOptions: [
        {
          label: '文档文件',
          options: [{
            value: 'txt',
            label: 'txt'
          }, {
            value: 'doc',
            label: 'doc'
          }, {
            value: 'docx',
            label: 'docx'
          }, {
            value: 'xls',
            label: 'xls'
          }, {
            value: 'xlsx',
            label: 'xlsx'
          }, {
            value: 'pdf',
            label: 'pdf'
          }]
        }, {
          label: '图形文件',
          options: [{
            value: 'gif',
            label: 'gif'
          }, {
            value: 'jpg',
            label: 'jpg'
          }, {
            value: 'png',
            label: 'png'
          }, {
            value: 'jpeg',
            label: 'jpeg'
          }, {
            value: 'psd',
            label: 'psd'
          }, {
            value: 'bmp',
            label: 'bmp'
          }]
        }, {
          label: '音视频文件',
          options: [{
            value: 'mp4',
            label: 'mp4'
          }, {
            value: 'mp3',
            label: 'mp3'
          }, {
            value: 'mov',
            label: 'mov'
          }, {
            value: 'avi',
            label: 'avi'
          }]
        }, {
          label: '压缩文件',
          options: [{
            value: 'rar',
            label: 'rar'
          }, {
            value: 'zip',
            label: 'zip'
          }]
        }, {
          label: '可执行文件',
          options: [{
            value: 'exe',
            label: 'exe'
          }, {
            value: 'com',
            label: 'com'
          }]
        }],
      btnShow: true,
      showMinderEditor: false,
      cuVisible: false,
      listVisible: false,
      initJson: {},
      ruleForm: {
        info: {
          name: "",
          btnName: "确定",
          level: "",
          type: "1"
        },
        precondition: {
          name: "",
          module: "",
          otherConditions: ""
        },
        msCorrelation: {
          id: "",
          version: "V1.0.0"
        },
        newEditForm: [{
          name: '', //字段名称
          type: '', //控件类型
          value: "", //输入值
          minLength: 1, //最小长度
          maxLength: 20, //最大长度
          minValue: 1,  //最小值
          maxValue: 99999,  //最大值
          require: true,  //必填
          repeat: true,  //唯一
          fileSize: 50,  //文件大小
          fileFormat: [],  //文件格式
          maxNum: 10,  //最大值
          restriction: false,  //是否有时间大小限制
          datePicker: [],  //日期范围
          timePicker: [],  //时间范围
          singleDate: "",  //单个日期值
          singleTime: "",  //单个时间值
          chooseDate: "1",  //日期选择
          chooseTime: "1",  //时间选择
          comparator: ">",  //运算符
        }],
        deleteOperation: {
          prompt: "",
          type: "",
          isContact: false,
          contactPrompt: "",
          isCanStill: false
        },
        listSearch: [{
          type: "",
          name: "",
          rule: "1",
          value: "",
          noValue: ""
        }],
        listSort: [{
          name: ""
        }],
        startStopOperation: {
          isStartConfirm: false,
          startupPrompt: "",
          isStopConfirm: false,
          stopPrompt: ""
        },
        searchFieldSize: 1,
        sortFieldSize: 1,
      },
      caseConfigId: "",
      rules: {
        precondition: {
          name: [
            {required: true, message: '请输入登录用户名', trigger: 'blur'},
          ],
          module: [
            {required: true, message: '请输入所在模块名称', trigger: 'blur'}
          ]
        },
        info: {
          name: [
            {required: true, message: '请输入用户名称', trigger: 'blur'},
          ],
          btnName: [
            {required: true, message: '请输入登录用户名', trigger: 'blur'},
          ],
          level: [
            {required: true, message: '请选择用例等级', trigger: 'change'}
          ]
        },
        deleteOperation: {
          prompt: [
            {required: true, message: '请输入删除提示语', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请选择删除方式', trigger: 'change'}
          ],
          isContact: [
            {required: true, message: '请选择是否有引用关系', trigger: 'change'}
          ],
          contactPrompt: [
            {required: true, message: '请输入引用删除提示语', trigger: 'blur'}
          ],
          isCanStill: [
            {required: true, message: '请选择有引用是否还能删除', trigger: 'change'}
          ],
          startStopOperation: [
            {required: true, message: '请选择启用有无二次确认', trigger: 'change'},
            {required: true, message: '请输入启用提示语', trigger: 'change'},
            {required: true, message: '请选择停用有无二次确认', trigger: 'blur'},
            {required: true, message: '请输入停用提示语', trigger: 'blur'}
          ]
        },
        searchFieldSize: [
          {required: true, message: '检索字段个数', trigger: 'blur'}
        ],
        sortFieldSize: [
          {required: true, message: '排序字段个数', trigger: 'blur'}
        ]
      },
    }
  },
  watch: {
    operateId() {
      this.resetForm("ruleForm")
      this.showMinderEditor = false
    }
  },
  methods: {
    // 计算框步骤数控制器
    changeNumber() {
      if (this.operateId === '4') {
        if (this.ruleForm.listSearch.length < this.ruleForm.searchFieldSize) {
          let arr = []
          for (let i = 0; i < this.ruleForm.searchFieldSize - this.ruleForm.listSearch.length; i++) {
            this.ruleForm.listSearch.push({name: "", type: ""})
          }
          this.ruleForm.listSearch = [...this.ruleForm.listSearch, ...arr]
        } else if (this.ruleForm.listSearch.length > this.ruleForm.searchFieldSize) {
          let arr = [...this.ruleForm.listSearch]
          for (let i = 0; i < this.ruleForm.listSearch.length - this.ruleForm.searchFieldSize; i++) {
            arr.pop()
          }
          this.ruleForm.listSearch = [...arr]
        }
      } else if (this.operateId === '5') {
        if (this.ruleForm.listSort.length < this.ruleForm.sortFieldSize) {
          let arr = []
          for (let i = 0; i < this.ruleForm.sortFieldSize - this.ruleForm.listSort.length; i++) {
            arr.push({name: ""})
          }
          this.ruleForm.listSort = [...this.ruleForm.listSort, ...arr]
        } else if (this.ruleForm.listSort.length > this.ruleForm.sortFieldSize) {
          let arr = [...this.ruleForm.listSort]
          for (let i = 0; i < this.ruleForm.listSort.length - this.ruleForm.sortFieldSize; i++) {
            arr.pop()
          }
          this.ruleForm.listSort = [...arr]
        }
      }
    },
    // 新增字段
    addField() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.ruleForm.newEditForm.push({
            name: '', //字段名称
            type: '', //控件类型
            value: "",//输入值
            minLength: 1, //最小长度
            maxLength: 20, //最大长度
            minValue: 1,  //最小值
            maxValue: 99999,  //最大值
            require: true,  //必填
            repeat: true,  //唯一
            restriction: false,  //是否有时间大小限制
            fileSize: 50,  //文件大小
            fileFormat: [],  //文件格式
            maxNum: 10,  //最大值
            datePicker: [],  //日期范围
            timePicker: [],  //时间范围
            singleDate: "",  //单个日期值
            singleTime: "",  //单个时间值
            chooseDate: "",  //日期选择
            chooseTime: "",  //时间选择
            comparator: "",  //运算符
          });
        }
      })
    },
    // 生成xmind
    generateMinder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true, // lock的修改符--默认是false
            text: 'Loading', // 显示在加载图标下方的加载文案
            spinner: 'el-icon-loading', // 自定义加载图标类名
            background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
            target: document.querySelector('#table')//loading覆盖的dom元素节点
          })
          this.ruleForm["operateId"] = !this.operateId ? "1" : this.operateId
          this.api({
            url: "/generateCase",
            method: "post",
            data: this.ruleForm
          }).then(resp => {
            if (resp.code === "500") {
              // this.$message.error(resp.msg)
            } else {
              this.initJson = resp;
              this.showMinderEditor = true;
            }
            loading.close()
          });
        }
      })
    },
    // 重置
    resetForm(formName) {
      const loading = this.$loading({
        lock: true, // lock的修改符--默认是false
        text: 'Loading', // 显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', // 自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
        target: document.querySelector('#table')//loading覆盖的dom元素节点
      })
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
        this.ruleForm = {
          info: {
            name: "",
            btnName: "确定",
            level: "",
            type: "1"
          },
          precondition: {
            name: "",
            module: "",
            otherConditions: ""
          },
          msCorrelation: {
            id: "",
            version: "V1.0.0"
          },
          newEditForm: [{
            name: '', //字段名称
            type: '', //控件类型
            value: "", //输入值
            minLength: 1, //最小长度
            maxLength: 20, //最大长度
            minValue: 1,  //最小值
            maxValue: 99999,  //最大值
            require: true,  //必填
            repeat: true,  //唯一
            fileSize: 50,  //文件大小
            fileFormat: [],  //文件格式
            maxNum: 10,  //最大值
            restriction: false,  //是否有时间大小限制
            datePicker: [],  //日期范围
            timePicker: [],  //时间范围
            singleDate: "",  //单个日期值
            singleTime: "",  //单个时间值
            chooseDate: "1",  //日期选择
            chooseTime: "1",  //时间选择
            comparator: ">",  //运算符
          }],
          deleteOperation: {
            prompt: "",
            type: "",
            isContact: false,
            contactPrompt: "",
            isCanStill: false
          },
          listSearch: [{
            type: "",
            name: "",
            rule: "1",
            value: "",
            noValue: ""
          }],
          listSort: [{
            name: ""
          }],
          startStopOperation: {
            isStartConfirm: false,
            startupPrompt: "",
            isStopConfirm: false,
            stopPrompt: ""
          },
          searchFieldSize: 1,
          sortFieldSize: 1,
        }
        this.changeNumber()
        this.caseConfigId = ""
      })
      loading.close()
      console.log("重置后的ruleForm=", form)
    },
    // 删除字段
    deleteField(index) {
      if (this.ruleForm.newEditForm.length > 1) {
        this.ruleForm.newEditForm.splice(index, 1)
      } else {
        this.$message.warning({message: "已经是最后一行了！"});
      }
    },
    // 引用配置
    userCaseConfig(data) {
      this.ruleForm = JSON.parse(data.content)
      this.caseConfigId = data.id
      this.$refs["ruleForm"].clearValidate()
    },
    // 保存
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.caseConfigId) {
            this.$confirm('确定保存当前所选择的用例配置吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.api({
                url: "/updateCaseConfig",
                method: "put",
                data: {
                  id: this.caseConfigId,
                  content: JSON.stringify(this.ruleForm),
                  updateUser: this.$store.state.user.userId
                }
              }).then(resp => {
                this.$message({message: resp, type: 'success'})
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消编辑保存'
              });
            });
          } else {
            this.cuVisible = true
          }
        } else {
          this.$message.warning({message: "请先配置好所有必填项！"});
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.case-main {
  .el-form-item {
    display: inline-block;
  }

  /deep/ .el-input__inner {
    width: 184px;

  }

  /deep/ .el-range-editor--small.el-input__inner {
    width: 420px;
  }

  /deep/ .el-select .el-input__inner {
    width: 184px !important;
  }

  /deep/ .el-input-number .el-input__inner {
    width: 130px;
  }

  .field-content {
    height: calc(100vh - 220px);
    overflow-y: scroll;
  }

  .left {
    padding: 10px;
  }

  .right {
    padding: 10px;
  }

  .el-divider--horizontal {
    margin: 5px 0;
  }

  .field-delete {
    margin-left: 20px;
    font-size: 16px;
    color: red;
    cursor: pointer;
  }

  .tip {
    padding: 0 5px;
    font-size: 16px;
    border-radius: 0;
    border-left: 4px solid #0044f0;
    font-weight: 700;
  }

  .bottom_btn {
    position: fixed;
    bottom: 35px;
    right: 80px;

    .firstBtn {
      color: rgb(245, 108, 108);
      background: rgb(252, 241, 241);
    }

    .secondBtn {
      color: rgb(0, 128, 128);
      background: rgb(235, 242, 242);
    }

    .thirdBtn {
      color: rgb(2, 167, 240);
      background: rgb(244, 244, 245);
    }

    .fourthBtn {
      color: rgb(103, 194, 58);
      background: rgb(242, 249, 238);
    }

    .fifthBtn {
      color: rgb(230, 162, 60);
      background: rgb(252, 246, 238);
    }

    .fab-item-title {
      cursor: pointer;
      box-shadow: 0 1px 0.5px #ccc;
      padding: 5px 5px;
      font-size: 14px;
      min-width: 5em;
      white-space: nowrap;
      border-radius: 2px;
      text-align: center;
      display: inline-block;
    }
  }

  .optBtn {
    position: fixed;
    right: 40px;
    color: #FFF;
    bottom: 34px;

    .hand-btn {
      background-color: #0044f0 !important;
      border-color: #0044f0 !important;
      color: white;
    }
  }
}
</style>
